<template>
  <div class="main-content">
    <!-- 广告组件 -->
    <advertisement v-if="!$store.state.adclosed" />
    <!-- 主页搜索框组件 -->
    <jdmenu></jdmenu>
    <!-- 轮播组件 -->
    <lunbo />
    
     

    <!-- 分类框 -->
    <div class="classification-box">
      <div style="margin-bottom:15px">
        <a href="javascript:;">
          <!-- 广告 -->
          <div class="boxi">
            <img src="./assets/ab1.png" alt="" style=" width:23.95% ">
          <img src="./assets/ad2.gif" alt="" style=" width:52%">
          <img src="./assets/ab3.png" alt="" style=" width:23.95%" >
          </div>
        </a>
      </div>
      <!-- 分类组件 -->
      <classification v-for="imgicon in classicon" :key="imgicon.id" :imgsrc="imgicon.imgsrc"
        :imgname="imgicon.imgname" />
    </div>

    <!-- 东京秒杀内容 -->
    <div class="seckill-box">
      <div class="seckill-content">
        <div class="seckill-title">
          <!-- <img src="./assets/seckilltitle.png" class="seckilltitle"> -->
         <div class="seckill-sec"> <p>京东秒杀</p></div>
          <span>更多秒杀 > </span>
         
        </div>
         <!-- 秒杀组件 -->
        <seckill v-for="sec in seckillinf" :key="sec.id" :imgsrc="sec.imgsrc" :new="sec.new" :old="sec.old" />
      </div>
    </div>
    <!-- 最下面的推荐部分 -->
    <div class="recommend-box">

      <!-- 推荐商品组件 -->
      <recommend v-for="recommends in recommendsinf" :key="recommends.id" :imgsrc="recommends.imgsrc"
        :ziying="recommends.ziying" :title="recommends.title" :price="recommends.price" :type="recommends.type" />
    </div>
  </div>
</template>

<script>
  import axios from "axios"
  //导入广告组件
  import advertisement from './components/index/Advertisement.vue'
  //导入搜索框组件
  import jdmenu from './components/index/menu.vue'
  import lunbo from './components/index/lunbo.vue'
  //导入分类组件
  import classification from './components/index/classification.vue'
  import seckill from './components/index/seckill.vue'
  //导入商品推荐组件
  import recommend from './components/index/recommend.vue'
  import $ from 'jquery'

  export default {
    name: "index",
    components: {
      advertisement,
      jdmenu,
      lunbo,
      classification,
      seckill,
      recommend
    },
    data() {
      return {
        //分类商品
        classicon: [{
            "imgsrc": require("./assets/class1.png.png"),
            "imgname": "京东超市"
          },
          {
            "imgsrc": require("./assets/class2.png.png"),
            "imgname": "数码电器"
          },
          {
            "imgsrc": require("./assets/class3.png.png"),
            "imgname": "京东服饰"
          },
          {
            "imgsrc": require("./assets/class4.png.png"),
            "imgname": "京东生鲜"
          },
          {
            "imgsrc": require("./assets/class5.png.png"),
            "imgname": "京东到家"
          },
          {
            "imgsrc": require("./assets/class6.png.png"),
            "imgname": "充值缴费"
          },
          {
            "imgsrc": require("./assets/class7.png.png"),
            "imgname": "物流查询"
          },
          {
            "imgsrc": require("./assets/class8.png.png"),
            "imgname": "领券"
          },
          {
            "imgsrc": require("./assets/class9.png.png"),
            "imgname": "领金贴"
          },
          {
            "imgsrc": require("./assets/class10.png.png"),
            "imgname": "PLUS会员"
          }
        ],
        //限时秒杀
        seckillinf: [{
            imgsrc: require("./assets/seckill1.jpg"),
            new: "35.8",        
          },
          {
            imgsrc: require("./assets/seckill2.jpg"),
            new: "224",         
          },
          {
            imgsrc: require("./assets/seckill3.jpg"),
            new: "648",
          },
          {
            imgsrc: "http://img14.360buyimg.com/n1/s150x150_jfs/t1/78877/35/5349/200178/5d384adaE0b33e36e/cc55855386897032.jpg.dpg",
            new: "36",
          }
        ],
       
        
        recommendsinf: [], 
        recommendsinfs: [],
      }
    },
    methods: {},
    async created() {
      const res2 = await axios.get("http://localhost:8080/recommend.json");
      this.recommendsinfs = res2.data
      for (var x = 0; x < 20; x++) {
        this.recommendsinf.push(this.recommendsinfs[x])
      }
      var vm = this
      var done = true
      $(window).scroll(function () {
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        //如果在顶部
        if (t == 0) {
          vm.$store.state.isscoll = false;
        } else {
          vm.$store.state.adclosed = true;
          vm.$store.state.isscoll = true;
        }
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        if (scrollTop + windowHeight == scrollHeight) {
          if (done)
            for (var te = 0; te < vm.xinxin.length; te++) {
              vm.recommendsinf.push(vm.xinxin[te])
              done = false
            }
        }
      });
    }
  }
</script>

<style>
  .classification-box {
    
    position: relative;
    margin-top: -12px;
    z-index: 12;
    top: 50px;
    overflow: hidden;
    background-color: #F6F6F6;
  }
  .main-content {
    height: 100%;
    background-color: rgb(246, 246, 246);
  }
  
  .seckill-box {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 20px;
    overflow: hidden;
    border-radius:20px ;
    white-space: nowrap;
    z-index: 20;
  }

  .seckill-content {
    position: relative;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    border-radius:20px ;
    white-space: nowrap;
    top: 50px;
  }
   .seckill-commodity img{
     position: relative;
     width: 65px;
     padding: 0px;
     margin: 0px;
     height: 65px;
   }
   .seckill-sec{
     position: absolute;
     margin: 7px;

   }

  .seckill-title {
    background-image: url("./assets/seckillbg.png");
    background-size: contain;
    height: 35px;
    width: 100%;
  }

  .seckilltitle {
    display: block;
    float: left;
    width: 75px;
    height: 20px;
    margin-top: 8px;
    margin-left: 10px;
  }

  .seckill-title span {
    display: block;
    float: right;
    font-size: 12.5px;
    margin-top: 10px;
    color: red;
  }
  .recommend-box {
    width: 100%;
    height: 2500px;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 10px;
    background-color: #F6F6F6;
  }


   .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>